@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  // font-family: Microsoft JhengHei;
  overflow: hidden;
  padding: 0 !important;
  padding-right: 0 !important;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

.h-full {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// 模块背景色
.modul_bg {
  background: rgba(233, 233, 233, 0.3)
}

// main-container global css
.app-container {
  padding: 1.25rem;
}

.form_title {
  font-weight: bold;
  color: #333;
  font-size: 1rem;
  margin-bottom: 1.375rem;
}

.summary {
  color: #666666;
  font-size: .875rem;
}

.title_c_f {
  color: #333;
  font-size: 1rem;
}

// 必填的星号
.my_required {
  color: #666666;
  font-size: .875rem;
}

.my_required:after {
  content: "*";
  color: #f56c6c;
  margin-left: .25rem;
}

.vue_datepicker {
  padding: 0;
}

.w100 {
  width: 100% !important;
}

.add_btn_top {
  position: absolute;
  right: 0;
  top: -2.625rem !important;
  height: 2.625rem;
  display: flex;
  align-items: center;
}

.content_height {
  height: calc(100vh - 13.75rem) !important;
  overflow-y: auto;
  overflow-x: hidden;

}

.content_details_height {
  // height: calc(100vh - 9.375rem - 15.4375rem) !important;
  height: calc(100vh - 31.375rem);
  overflow-y: auto;
  overflow-x: hidden;

}

.no_permission {
  background-color: #fff;
  color: #F56C6C;
  font-size: 20px;
  width: 100%;
  // height: calc(100vh - 140px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 按钮禁用样式
.is-disabled_pointer_none_list,
.is-disabled_pointer_none {

  position: relative;
  pointer-events: none !important;


}

// .is-disabled_pointer_none::before{
//   content: '';
//   position: absolute;    cursor: not-allowed;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   // pointer-events:none !important;

// }
.is-disabled_pointer_none_icon {
  pointer-events: none !important;
  color: #a0cfff !important; //主要处理图标的颜色
  position: relative;

}

.is-disabled_pointer_none_img {
  color: #a0cfff !important;
  opacity: 0.4; //处理图片icon的展示
}

.is-disabled_pointer_none_list:after {
  content: '';
}

.mb_sm {
  margin-bottom: 1.25rem;
}

.form_padding {
  padding: 0 2.5rem;
}

.display_flex {
  display: flex;
  align-items: center;
}

// 栅格化布局--一行展示五个  24 / 5 = 4.8 (4-8)

@media only screen and (min-width: 768px) {
  .el-col-sm-4-8 {
    width: 20%;
  }

  .el-col-sm-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-sm-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-sm-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 992px) {
  .el-col-md-4-8 {
    width: 20%;
  }

  .el-col-md-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-md-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-md-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 1200px) {
  .el-col-lg-4-8 {
    width: 20% !important;
  }

  .el-col-lg-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-lg-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-lg-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 1920px) {
  .el-col-xl-4-8 {
    width: 20%;
  }

  .el-col-xl-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-xl-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-xl-push-4-8 {
    position: relative;
    left: 20%;
  }
}

.nodata {
  text-align: center;
  color: #999;
}

//级联 没有数据的高度
.user_admin_cascader_nodata {
  .el-scrollbar__wrap {
    height: 40px;
  }
}

.el-loading-mask {
  z-index: 999;
}

.el-switch__label.is-active {
  color: #333;
}

.el-switch__label--left {
  color: #409EFF;
}

.column_search_box {
  .column_title {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 18px;
  }

  .column_search {
    .el-checkbox {
      // margin-right: 0;
      margin-bottom: 6px;

      .el-checkbox__label {
        font-size: 16px;

      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.dark_theme {
  .el-pagination__total {
    color: #fff;
  }

  .el-input__inner {
    color: #fff;
  }

  .el-pagination {
    .el-input__inner {
      background-color: inherit;
      border: 1px solid #096a9f;
      color: #fff;
    }

    .el-pagination__jump {
      color: #fff;

    }

    .btn-prev,
    .btn-next {
      background-color: #268FDC;
    }


  }

  .el-form-item__label {
    color: #fff;
  }
}

.dark_input {

  .el-input__inner {
    background-color: inherit;
    border: 1px solid #096a9f;
  }

  &.el-input__inner {
    background-color: inherit;
    border: 1px solid #096a9f;

    .el-range-separator {
      color: #fff;
    }

    .el-range-input {
      color: #fff;
      background-color: inherit;

    }
  }
}

.dark_table {

  .el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }

  .el-table--border,
  .el-table--group {
    border-color: #25A0D9;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #25A0D9 !important;
  }

  .el-table--border th,
  .el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid #25A0D9;
  }

  .el-table--border td,
  .el-table--border th {
    border-right: 1px solid #25A0D9;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #5dcbff;
  }

  .el-table {
    background-color: transparent !important;

    .el-table__body-wrapper {
      border-bottom: 1px solid #25A0D9;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    .el-table__body-wrapper::-webkit-scrollbar-track {
      background-color: inherit;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #5dcbff;
      border-color: #5dcbff;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 4px !important;
      height: 4px;
    }

    .el-table__body-wrapper::-webkit-scrollbar-corner {
      background-color: #5dcbff;
      display: none;
    }


    .el-table__empty-text {
      color: #fff;
    }

    tr,
    th {
      color: #fff;
      background-color: transparent !important;
    }

    .el-table__row:hover>td {
      background-color: inherit !important;
    }

    td,
    th.is-leaf {
      // border-bottom: 0 !important;
    }

    .el-table__row--striped:hover>td {
      background-color: inherit;
    }
  }
}

@keyframes morph {
  0% {
    stroke-width: 10;
    stroke-opacity: 0.1;
  }

  25% {
    stroke-width: 30;
    stroke-opacity: 0.3;
  }

  50% {
    stroke-width: 10;
    stroke-opacity: 0.5;
  }

  75% {
    stroke-width: 10;
    stroke-opacity: 0.3;
  }

  100% {
    stroke-width: 10;
    stroke-opacity: 0;
  }
}

.loading-circle-1 {
  -webkit-animation: morph 2s ease infinite;
  animation: morph 2s ease infinite;
}
.vue-tooltip.tooltip-custom {
  /* 这里进行父元素样式更改 */
  background-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-arrow {
  /* 下方的小三角形 */
  border-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-content {
  /* 矩形内容区域 */
  color: #333;
  padding: 6px 0;
  .tool_item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.type_success{
  fill: #67C23A;
  opacity: 0.3; 
   animation: blink 1.5s ease-in-out infinite;
}
/* 定义闪烁动画 */
@keyframes blink {
  0% {
    stroke-width: 4px;
    stroke-opacity: 1;
    filter: none;
  }
  50% {
    stroke-width: 10px;
    stroke-opacity: 0.2;
    filter: blur(10px);
  }
  100% {
    stroke-width: 4px;
    stroke-opacity: 1;
    filter: none;
  }
}

.flowingWater {
  fill: rgba(114, 194, 64, 0.6);
  stroke: #52c41a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: flow 0.8s linear infinite;
  opacity: 1 !important;
  
}

@keyframes flow {
  0% {
    stroke-dasharray: 5 5;
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dasharray: 5 5;
    stroke-dashoffset: -10;
  }
}